<template>
	<div class="item-show">
		<div class="item-title">{{ periodTitle }}</div>
		<div class="item-content">
			<div class="item-row-content">
				<div class="item-row-six">
					<span>团队账单净资产</span>
					<el-popover
						placement="top-start"
						width="700"
						trigger="hover"
						content="
							团队账单净资产=该代理的账单净资产+该代理的所有下级代理净资产+该代理全部下级会员账单净资产
						"
					>
						<span slot="reference">
							<i class="el-icon-question"></i>
						</span>
					</el-popover>
					<span
						class="show-money"
						:style="handleNumberColor(billDetail.teamFunds)"
					>
						{{
							handleNumber(
								billDetail.currency,
								billDetail.teamFunds
							)
						}}
					</span>
				</div>
				<div class="item-row-six">
					<span>应还账款</span>
					<span class="show-money">
						{{
							handleNumber(
								billDetail.currency,
								billDetail.teamReturnLoan
							)
						}}
					</span>
				</div>
				<div class="item-row-six">
					<span>可提现额</span>
					<span class="show-money">
						{{
							handleNumber(
								billDetail.currency,
								billDetail.teamWithdrawable
							)
						}}
					</span>
				</div>
				<div class="item-row-six">
					<span>授信总额</span>
					<span class="show-money">
						{{
							handleNumber(
								billDetail.currency,
								billDetail.teamCreditQuota
							)
						}}
					</span>
				</div>
				<div class="item-row-six">
					<span>外放额度</span>
					<span class="show-money">
						{{
							handleNumber(
								billDetail.currency,
								billDetail.outsideAmount
							)
						}}
					</span>
				</div>
				<div class="item-row-six">
					<span>团队收益</span>
					<span class="show-money">
						{{
							handleNumber(
								billDetail.currency,
								billDetail.teamIncomeAmount
							)
						}}
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		periodType: {
			type: String,
			default: 'current'
		},
		billDetail: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	computed: {
		periodTitle() {
			if (this.periodType === 'current') {
				return '本期数据'
			} else {
				return '上期数据'
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.item-show {
	width: 100%;
	min-height: 80px;
	margin-right: 10px;
	margin-bottom: 20px;
	border-color: #bebebe;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	.item-title {
		color: #6a6a6a;
		font-size: 18px;
		font-weight: 900;
		margin-left: 10px;
		margin-top: 10px;
	}
	.item-content {
		margin-left: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
		i {
			cursor: pointer;
		}
		span {
			line-height: 3;
		}
		.item-row-content {
			word-wrap: break-word;
			.item-row-five {
				min-width: 19%;
				display: inline-block;
			}
			.item-row-six {
				min-width: 16%;
				display: inline-block;
			}
		}
		.show-money {
			font-size: 15px;
			padding-left: 5px;
			color: black;
		}
		.show-money-url {
			font-size: 14px;
			color: black;
		}
	}
}
</style>
